<template>
    <div class="not-found-page">
        <!-- 背景元素 -->
        <div class="background-elements">
            <div class="cloud cloud-1"></div>
            <div class="cloud cloud-2"></div>
            <div class="cloud cloud-3"></div>
            <div class="sun"></div>
            <div class="bird bird-1"></div>
            <div class="bird bird-2"></div>
        </div>

        <!-- 主要内容 -->
        <div class="content">
            <div class="compass" @mouseenter="startCompassSpin" @mouseleave="stopCompassSpin">
                <div class="compass-needle"></div>
                <div class="compass-center"></div>
            </div>

            <h1 class="animated-text">404</h1>
            <p class="subtitle">哎呀！您似乎迷路了</p>
            <p class="description">我们找不到您要寻找的页面，但这里有一些美丽的风景可以欣赏</p>

            <div class="action-buttons">
                <router-link to="/" class="home-button">
                    <span>返回首页</span>
                    <svg viewBox="0 0 24 24">
                        <path d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" />
                    </svg>
                </router-link>
                <button class="explore-button" @click="showRandomDestination">
                    <span>探索目的地</span>
                    <svg viewBox="0 0 24 24">
                        <path
                            d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M7.07,18.28C7.5,17.38 10.12,16.5 12,16.5C13.88,16.5 16.5,17.38 16.93,18.28C15.57,19.36 13.86,20 12,20C10.14,20 8.43,19.36 7.07,18.28M18.36,16.83C16.93,15.09 13.46,14.5 12,14.5C10.54,14.5 7.07,15.09 5.64,16.83C4.62,15.5 4,13.82 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,13.82 19.38,15.5 18.36,16.83M12,6C10.06,6 8.5,7.56 8.5,9.5C8.5,11.44 10.06,13 12,13C13.94,13 15.5,11.44 15.5,9.5C15.5,7.56 13.94,6 12,6M12,8C12.83,8 13.5,8.67 13.5,9.5C13.5,10.33 12.83,11 12,11C11.17,11 10.5,10.33 10.5,9.5C10.5,8.67 11.17,8 12,8Z" />
                    </svg>
                </button>
            </div>
        </div>

        <!-- 随机目的地弹窗 -->
        <div class="destination-modal" v-if="showModal" @click.self="closeModal">
            <div class="modal-content">
                <button class="close-button" @click="closeModal">×</button>
                <h3>{{ randomDestination.name }}</h3>
                <div class="destination-image" :style="{ backgroundImage: `url(${randomDestination.image})` }"></div>
                <p>{{ randomDestination.description }}</p>
                <router-link :to="randomDestination.path" class="visit-button">前往此地</router-link>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'NotFoundPage',
    data() {
        return {
            showModal: false,
            randomDestination: {},
            destinations: [
                {
                    name: '巴黎浪漫之旅',
                    image: require('@/assets/destinations/paris.jpg'),
                    description: '探索浪漫之都的艺术与美食，漫步塞纳河畔，感受埃菲尔铁塔的壮丽。',
                    path: '/destinations/paris'
                },
                {
                    name: '马尔代夫天堂岛',
                    image: require('@/assets/destinations/maldives.jpg'),
                    description: '在碧海蓝天的马尔代夫享受阳光沙滩，体验世界顶级的海岛度假。',
                    path: '/destinations/maldives'
                },
                {
                    name: '东京都市探索',
                    image: require('@/assets/destinations/tokyo.jpg'),
                    description: '感受传统与现代的完美融合，从古老寺庙到霓虹闪烁的涩谷街头。',
                    path: '/destinations/tokyo'
                },
                {
                    name: '瑞士阿尔卑斯',
                    image: require('@/assets/destinations/swiss.jpg'),
                    description: '壮丽的雪山、清澈的湖泊和迷人的小镇，体验欧洲最纯净的自然风光。',
                    path: '/destinations/swiss'
                }
            ]
        }
    },
    methods: {
        startCompassSpin() {
            const compass = document.querySelector('.compass-needle')
            compass.style.transform = 'rotate(360deg)'
            compass.style.transition = 'transform 2s linear'
        },
        stopCompassSpin() {
            const compass = document.querySelector('.compass-needle')
            compass.style.transform = 'rotate(0deg)'
            compass.style.transition = 'transform 0.5s ease-out'
        },
        showRandomDestination() {
            const randomIndex = Math.floor(Math.random() * this.destinations.length)
            this.randomDestination = this.destinations[randomIndex]
            this.showModal = true
        },
        closeModal() {
            this.showModal = false
        }
    },
    mounted() {
        // 初始化动画
        const animatedText = document.querySelector('.animated-text')
        animatedText.style.animation = 'float 3s ease-in-out infinite'

        // 云朵动画
        const clouds = document.querySelectorAll('.cloud')
        clouds.forEach((cloud, index) => {
            cloud.style.animation = `cloudMove ${15 + index * 3}s linear infinite`
        })

        // 小鸟动画
        const birds = document.querySelectorAll('.bird')
        birds.forEach((bird, index) => {
            bird.style.animation = `birdFly ${8 + index * 2}s linear infinite`
        })
    }
}
</script>

<style scoped>
.not-found-page {
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to bottom, #87CEEB, #E0F7FA);
    overflow: hidden;
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.background-elements {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.cloud {
    position: absolute;
    background: white;
    border-radius: 50%;
    opacity: 0.8;
}

.cloud-1 {
    width: 120px;
    height: 40px;
    top: 20%;
    left: -150px;
    box-shadow:
        60px 0px 0 0px white,
        30px -20px 0 0px white;
}

.cloud-2 {
    width: 180px;
    height: 60px;
    top: 35%;
    right: -200px;
    box-shadow:
        90px 0px 0 0px white,
        45px -30px 0 0px white;
}

.cloud-3 {
    width: 100px;
    height: 30px;
    bottom: 25%;
    left: -120px;
    box-shadow:
        50px 0px 0 0px white,
        25px -15px 0 0px white;
}

@keyframes cloudMove {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(100vw + 200px));
    }
}

.sun {
    position: absolute;
    width: 80px;
    height: 80px;
    background: #FFD700;
    border-radius: 50%;
    top: 10%;
    right: 15%;
    box-shadow: 0 0 40px #FFD700;
    animation: sunGlow 4s ease-in-out infinite alternate;
}

@keyframes sunGlow {
    0% {
        box-shadow: 0 0 40px #FFD700;
    }

    100% {
        box-shadow: 0 0 60px #FFA500;
    }
}

.bird {
    position: absolute;
    width: 30px;
    height: 20px;
}

.bird-1 {
    top: 25%;
    left: -50px;
}

.bird-2 {
    top: 40%;
    left: -80px;
}

.bird::before,
.bird::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: #333;
    border-radius: 50%;
}

.bird::before {
    top: 0;
    left: 0;
}

.bird::after {
    top: 0;
    left: 15px;
}

@keyframes birdFly {
    0% {
        transform: translateX(0) translateY(0);
    }

    25% {
        transform: translateX(25vw) translateY(-10px);
    }

    50% {
        transform: translateX(50vw) translateY(0);
    }

    75% {
        transform: translateX(75vw) translateY(-15px);
    }

    100% {
        transform: translateX(100vw) translateY(0);
    }
}

.content {
    text-align: center;
    z-index: 2;
    max-width: 800px;
    padding: 40px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    transform: translateY(0);
    animation: fadeInUp 1s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.compass {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #FFF;
    border: 8px solid #4FC3F7;
    position: relative;
    margin: 0 auto 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.compass:hover {
    transform: scale(1.05);
}

.compass-needle {
    position: absolute;
    width: 4px;
    height: 60px;
    background: #F44336;
    top: 50%;
    left: 50%;
    transform-origin: top center;
    transform: translate(-50%, -50%) rotate(0deg);
    transition: transform 0.5s ease-out;
}

.compass-center {
    position: absolute;
    width: 20px;
    height: 20px;
    background: #333;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.animated-text {
    font-size: 6rem;
    font-weight: 700;
    color: #0288D1;
    margin: 20px 0;
    text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

.subtitle {
    font-size: 1.8rem;
    color: #333;
    margin-bottom: 10px;
}

.description {
    font-size: 1.2rem;
    color: #666;
    margin-bottom: 30px;
    line-height: 1.6;
}

.action-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
}

.home-button,
.explore-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}

.home-button {
    background: #0288D1;
    color: white;
}

.home-button:hover {
    background: #0277BD;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(2, 136, 209, 0.4);
}

.explore-button {
    background: #4CAF50;
    color: white;
}

.explore-button:hover {
    background: #43A047;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(76, 175, 80, 0.4);
}

.home-button svg,
.explore-button svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    margin-left: 8px;
}

.destination-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-content {
    background: white;
    border-radius: 15px;
    padding: 30px;
    width: 90%;
    max-width: 500px;
    position: relative;
    animation: slideUp 0.4s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.close-button {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #666;
    transition: color 0.3s;
}

.close-button:hover {
    color: #333;
}

.destination-image {
    height: 200px;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    margin: 20px 0;
}

.visit-button {
    display: inline-block;
    padding: 10px 20px;
    background: #0288D1;
    color: white;
    border-radius: 5px;
    text-decoration: none;
    margin-top: 15px;
    transition: background 0.3s;
}

.visit-button:hover {
    background: #0277BD;
}

@media (max-width: 768px) {
    .content {
        padding: 20px;
        width: 90%;
    }

    .animated-text {
        font-size: 4rem;
    }

    .subtitle {
        font-size: 1.5rem;
    }

    .action-buttons {
        flex-direction: column;
        gap: 15px;
    }

    .home-button,
    .explore-button {
        width: 100%;
    }
}
</style>